<template>
    <div class="bivariate-analysis">
        <title-bar title="图形化展示"></title-bar>
        <div class="tabs">
            <el-radio-group v-model="active">
                <el-radio-button v-for="(item, index) in tabs" :key="index" :label="index">{{item.name}}</el-radio-button>
            </el-radio-group>
        </div>
        <div class="chart-con">
            <div class="chart-left" :style="active===0?'height: 800px':'height: 400px'">
                <field></field>
            </div>
            <div class="chart-right" v-if="active" style="height: 400px; width: 800px">
                <correlation-matrix></correlation-matrix>
            </div>
            <div class="chart-right" v-show="active===0" style="height: 800px; width: 800px">
                <scatter-diagram></scatter-diagram>
            </div>
        </div>
    </div>
</template>
<script>
import TitleBar from '@/components/TitleBar'
import ScatterDiagram from './ScatterDiagram'
import CorrelationMatrix from './CorrelationMatrix'
import Field from './Field'
export default {
    name: 'BivariateAnalysis',
    components: { TitleBar, Field, ScatterDiagram, CorrelationMatrix },
    data () {
        return {
            active: 0,
            tabs: [
                { name: '散点图' },
                { name: '相关性矩阵' }
            ]
        }
    }
}
</script>
<style lang="less">
    .bivariate-analysis {
        .tabs {
            display: flex;
            justify-content: center;
            padding-bottom: 20px;
        }
        .chart-con {
            height: 450px;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            .chart-left {
                width: 18%;
                overflow-y: auto;
                overflow-x: hidden;
            }
            .chart-right {
                overflow-y: auto;
                overflow-x: hidden;
                padding-left: 1%;
                display: flex;
                justify-content: center;
                position: absolute;
                top: 0;
                left: 190px;
            }
        }
        & > .tabs {
            .el-radio-button__inner {
                width: 150px;
            }
        }
    }
</style>
